<template>
    <div>
        <h1 v-html="stu.ename"></h1>
        <h1>{{stu.ename}}-{{stu.age}}</h1>
        <input v-model="stu.ename" />
        <input type="checkbox" name="likes" value="LOL" v-model="likes" /> LOL
        <input type="checkbox" name="likes" value="DNF" v-model="likes" /> DNF
        <input type="checkbox" name="likes" value="CS" v-model="likes"  /> CS

        <select v-model="province">
            <option value="1">辽宁</option>
            <option value="2">天津</option>
            <option value="3">北京</option>
        </select>
        <ul>
            <li v-for="(item, index) in datalist" v-bind:key="index">
                {{item.title}}
                <img v-bind:src="item.image" />
            </li>
        </ul>
        <button v-on:click="showlikes">按钮</button>

        <button @click="isflg = !isflg">切换</button>
        <div :class="{show: isflg, hide: !isflg}">display: none</div>
        <div :class="isflg?'show':'hide'">display: none</div>
        <div v-if="isflg">
            <div class="show red">1111</div>
        </div>
        <div v-else>
            <div class="show red">222</div>
        </div>
    </div>
</template>
<script>
import {stu} from './a1'
import x from './a1'
import axios from 'axios'

export default {
    name: 'Emp',
    created() { // 钩子， 生命周期
        // console.info(stu)
        // console.info(this.likes)
    }
    ,
    data: function() {
        return { 
            isflg: true,
            datalist:[],
            province: '3',
            stu: {
                ename: 'tom',
                age: 10
            },
            likes: ['LOL', 'DNF'],
            
        }
    },
    methods: {
        showlikes: function() {
            console.info(this.likes)
            console.info(this.province)
            let _that = this
            axios({
                method: 'get',
                url: 'https://www.fastmock.site/mock/ed95e4b607f3acb7ca765c9a0283c571/api/goods/all',
                params: {
                    firstName: 'Fred'
                }
            }).then(
                function(response) {
                    // debugger
                    console.info(response.data)
                    _that.datalist = response.data.data
                }
            ).catch(
                function() {
                    console.info(arguments)
                }
            )
        }
    }

}
</script>
<style scoped>
.show {
    display: block;
}
.hide {
    display: none;
}
.red {
    color: red;
}
</style>

